<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav ul{
            display: flex;
            list-style: none;
        }
        .nav ul li {
            margin: 20px
        }

    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部导航 -->
        <my-nav></my-nav>

        <!-- 5.占坑位 -->
        <router-view></router-view>
    </div>
    <template id="mynav">
        <div class="nav">
            <ul>
                <li>
                    <!-- <a href="#/myMusic">我的音乐</a> -->
                    <router-link to="/myMusic">我的音乐</router-link>
                </li>
                <li>
                    <!-- <a href="#/findMusic">发现音乐</a> -->
                    <router-link to="/findMusic">发现音乐</router-link>
                </li>
                <li>
                    <!-- <a href="#/friend">关注</a> -->
                    <router-link to="/friend">关注</router-link>
                </li>
            </ul>
        </div>
    </template>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        let myNav = {
            template: "#mynav"
        }


        // 1.定义组件
        let findMusic = {
            template: "<div>发现音乐的内容</div>"
        }

        let myMusic = {
            template: "<div>我的音乐的内容</div>"
        }

        let friend = {
            template: "<div>关注</div>"
        }

        // 2.定义路径
        const routes = [
            {
                path: "/findMusic",
                component: findMusic
            },
            {
                path: "/myMusic",
                component: myMusic
            },
            {
                path: "/friend",
                component: friend
            }
        ]

        // 3.生成Router实例对象
        const router = new VueRouter({
            // history模式不是使用hash实现，history h5 API
            // history一刷新就会出现404 没有这个资源  -- 可以配合服务器配置进行 解决该问题。
            // 一般情况下， 开发阶段使用hash ，上线阶段使用history （SEO -- search engine optionzimation）
            mode: 'history',
            routes
        })


        const app = new Vue({
            el: "#app",
            // 4.将路由挂载到vue中
            router,
            components: {
                myNav
            }
        })
    </script>
</body>
</html>